import { ref } from 'vue'
import { defineStore } from 'pinia'
import mapboxgl from 'mapbox-gl'
import { Scene } from '@antv/l7'
import { Mapbox } from '@antv/l7'

mapboxgl.accessToken =
  'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'

export const useMapStore = defineStore('map',() => {
    const map = ref(null)
    const scene = ref(null)

    const initMap = () => {
        map.value = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v11',
          center: [114.299, 30.585],
          zoom: 1,
          projection: 'globe',
          attributionControl: false,
        })
        scene.value = new Scene({
            id:'map',
            map: new Mapbox({
                mapInstance: map.value
            }),
            logoVisible: false
        })
    }

    return {
        map,
        scene,
        initMap
    }
})